<template>
    <div>
        <table align="center" width="200px">
            <tr>
                <th>标题</th>
                <th>权限</th>
            </tr>
            <tr v-for="story in storyList">
                <th @click="show_story(story)"><a href="javascript:;">{{story.title}}</a></th>
                <th>{{story.level | level}}</th>
            </tr>
        </table>
        <router-link to="/seek_story">搜索</router-link>
        <router-link to="/record_story">阅读记录</router-link>
        <button @click="logout">注销</button>
    </div>
</template>

<script>
    export default {
        name: "index_story",
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem('user')),
                storyList: [],
            }
        },
        created() {
            this.$axios({
                url: 'story/story/'
            }).then(resp=>{
                console.log(resp.data)
                this.storyList = resp.data
            })
        },
        methods: {
            show_story(story){
                if (this.user.level>=story.level){
                    this.$router.push(`/show_story?story_id=${story.id}`)
                }else{
                    alert('请您升级VIP')
                }
            },
            logout(){
                sessionStorage.clear();
                this.$router.push('/login_story')
            }
        },
        computed: {},
        filters: {
            level(x){
                if (x==0){
                    return '普通'
                }else{
                    return 'VIP'
                }
            }
        },
        watch: {},
    }
</script>

<style scoped>

</style>
